<template>
  <div>
    <el-dialog v-model="dialogVisible" title="聊天" class="box" draggable :destroy-on-close="true" :close-on-click-modal="false">
      <div class="flex-container">
        <el-card class="box-card">
          <template #header>
            <div class="card-header" >
              <span>工单号：{{ obj.info.workId }}</span>
              <div style="text-align: center">
                <h3 style="margin: 5px">{{ obj.info.workDescribe }}</h3>
                <span style="font-size: small">用户ID:{{ obj.info.workUser }}</span>
              </div>
              <el-tag class="ml-2" v-if="obj.info.workState==1">待处理</el-tag>
              <el-tag class="ml-2" type="warning" v-if="obj.info.workState==2">已处理</el-tag>
              <el-tag class="ml-2" type="success" v-if="obj.info.workState==3">已结单</el-tag>
            </div>
          </template>
          <div style="width:100%;height:535px">
              <el-scrollbar style="height: 425px;padding: 5px" ref="scrollbarRef">
                <div ref="innerRef" v-for="(item,index) in userList" :key="index">
                  <div class="gm-box"  v-if="store.state.user_uid == item.userId">
                    <el-avatar
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <p class="chat_gm">{{item.message}}</p>
                  </div>
                  <div class="user-box" v-else>
                    <el-avatar
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    />
                    <p class="chat_user">{{item.message}}</p>
                  </div>

                </div>
              </el-scrollbar>
            <el-divider />
            <div style="height: 100px">
              <el-form :model="obj.form" >
                <el-form-item>
                  <el-input class="inputDeep" v-model="obj.form.message" type="textarea" />
                </el-form-item>
                <el-form-item style="display: flex;">
                  <el-button type="primary" @click="onSubmit" style="margin-left: auto">发送</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive, watch,ref, onMounted, onUnmounted} from 'vue'
import { ElScrollbar as ElScrollbarType } from 'element-plus';
import { ElMessage } from 'element-plus'
import api from "@/api/api";
import store from "@/store/index.ts";
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>()


//注意哈，这里是个空
const timer = ref()

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  dialogTableValue: {
    type: Object,
    default: () => ({})
  }
});
// do not use same name with ref

let the_id = ref();
const userList = ref();
const isShow = ref();
let obj = reactive({
  info:{
    workId:Number,
    workDescribe:String,
    workUser:String,
    workState:Number
  },
  form:{
    workId: Number,
    message: '',
  }
})

const emit = defineEmits(['chatDialog'])
const dialogVisible = computed({
  get: () => props.show,
  set: (newValue) => {
    emit('chatDialog', newValue)
  },
})

watch(() => props.show, () => {
  isShow.value = props.show;
}, {deep: true, immediate: true})

watch(() => props.dialogTableValue, () => {
  obj.info.workId = props.dialogTableValue.workId;
  the_id = props.dialogTableValue.workId;
  obj.info.workDescribe = props.dialogTableValue.workDescribe;
  obj.info.workUser = props.dialogTableValue.workUser;
  obj.info.workState = props.dialogTableValue.workState;
}, {deep: true, immediate: true})

const onSubmit = () => {
  if(obj.form.message == ''){
    ElMessage.error('输入不能为空！')
    return;
  }
  obj.form.workId = obj.info.workId

  api.postFormAPI('/api/admin/wms/work/chat/add', obj.form).then(res => {
    //数据处理
    const code = res.data.code
    const data = res.data.data.item
    if (code === 200) {
      console.log(666)
    }
  }).catch(err => console.log(err))
  GetData(the_id)
  scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
}

const GetData = (id: any) => {
  api.getListAPI('/api/admin/wms/work/chat/all', {'work_id': id}).then(res => {
    //数据处理
    const code = res.data.code
    const data = res.data.data.item
    if (code === 200) {
      userList.value = data
    }
  }).catch(err => console.log(err))
}

//先创建一个定时器
onMounted(() => {
    timer.value=setInterval(() => {
      // do something
      if (isShow.value) {
        GetData(the_id)
      }
      else {
        setInterval(timer.value)
        timer.value = ""
      }
    }, 5000)
})

//在页面销毁之前先销毁定时器
onUnmounted(() => {
  setInterval(timer.value)
  timer.value = ""

})
</script >

<style scoped>
.box {
  border-radius: 8px;background-color: #F2F2F2
}
.el-card /deep/ .el-card__header {
  padding: 8px;
}
.el-card /deep/ .el-card__body {
  padding: 8px;
}

.el-divider--horizontal{
  margin: 5px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  height: 640px;
  min-width: 100%;
  width: 50%;
}

.inputDeep>>>.el-textarea__inner {
  border: 0;
  resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.chat_user {
  background-color: rgb(229,229,229);color: black;padding: 8px;border-radius: 5px;margin: 0 8px
}

.chat_gm {
  background-color: #409EFF;color: white;padding: 8px;border-radius: 5px;margin: 0 8px
}

.user-box {
  display:flex;flex-direction: row;margin: 5px 0;
}
.gm-box {
  display:flex;flex-direction: row-reverse;margin: 5px 0;
}
</style>
